/*
 * @Author: EuniceShaw
 * @Date: 2022-03-06 20:10:15
 * @LastEditors: EuniceShaw
 * @LastEditTime: 2022-04-10 18:58:38
 * @Description: api挂载 app
 *
 */
import { App } from 'vue';
import {
  ElButton,
  ElMessage,
  ElNotification,
  ElMessageBox,
  ElMenu,
  ElMenuItem,
  ElSubMenu,
  ElBreadcrumb,
  ElBreadcrumbItem,
  ElTooltip,
  ElDropdown,
  ElDropdownMenu,
  ElDropdownItem,
  ElConfigProvider,
} from 'element-plus';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
// Element Plus 组件内部默认使用英语
// https://element-plus.gitee.io/zh-CN/guide/i18n.html
import zhCn from 'element-plus/es/locale/lang/zh-cn';
// Element Plus 直接使用了 Day.js 项目的时间日期国际化设置, 并且会自动全局设置已经导入的 Day.js 国际化配置。
import 'dayjs/locale/zh-cn';

// 统一导入el-icon图标
import * as ElIconModules from '@element-plus/icons-vue';

// $ELEMENT size属性类型
export type Size = 'large' | 'default' | 'small';

interface ElementOptions {
  size: Size;
}

export default (app: App, options: ElementOptions): void => {
  app.use(ElementPlus, {
    locale: zhCn,
  });

  // 统一注册el-icon图标
  for (let iconName in ElIconModules) {
    app.component(iconName, ElIconModules[iconName]);
  }

  // 按需导入组件列表
  const components = [
    ElButton,
    ElMessage,
    ElNotification,
    ElMessageBox,
    ElMenu,
    ElMenuItem,
    ElSubMenu,
    ElBreadcrumb,
    ElBreadcrumbItem,
    ElTooltip,
    ElDropdown,
    ElDropdownMenu,
    ElDropdownItem,
    ElConfigProvider
  ];

  components.forEach(component => {
    app.use(component);
  });

  // Vue.prototype 替换为 config.globalProperties
  // 文档说明 https://v3.cn.vuejs.org/guide/migration/global-api.html#vue-prototype-%E6%9B%BF%E6%8D%A2%E4%B8%BA-config-globalproperties
  app.config.globalProperties.$message = ElMessage;
  app.config.globalProperties.$notify = ElNotification;
  app.config.globalProperties.$confirm = ElMessageBox.confirm;
  app.config.globalProperties.$alert = ElMessageBox.alert;
  app.config.globalProperties.$prompt = ElMessageBox.prompt;

  // element-plus全局配置
  // 说明文档：https://element-plus.gitee.io/#/zh-CN/component/quickstart#quan-ju-pei-zhi
  // 该对象目前支持 size 与 zIndex 字段。size 用于改变组件的默认尺寸 small，zIndex 设置弹框的初始 z-index（默认值：2000）。
  app.config.globalProperties.$ELEMENT = {
    size: options.size,
    // zIndex: 2000 弹框zIndex默认值：2000
  };
};
